<template>
  <Form ref="formRef" name="fileSystemForm" :model="fileSystemList">
    <Space
      v-for="(sfs, index) in fileSystemList"
      :key="sfs.id"
      style="display: flex; margin-bottom: 8px"
      align="baseline"
    >
      <FormItem
        :name="[index, 'shareProto']"
        :rules="{
          message: 'Missing sfs',
          required: true,
        }"
      >
        <Select
          v-model:value="sfs.shareProto"
          :options="fsSpecifications.map((a) => ({ value: a, label: a, key: a }))"
          placeholder="请选择文件系统规格"
          style="width: 180px"
        ></Select>
      </FormItem>
      <FormItem
        :name="[index, 'size']"
        :rules="{
          required: true,
          message: '请选择大小',
        }"
      >
        <InputNumber :max="327680" :min="500" v-model:value="sfs.size" />
      </FormItem>
      <span> GB </span>
      <FormItem
        :name="[index, 'num']"
        label="数量"
        :rules="{
          required: true,
          message: '请选择数量',
        }"
      >
        <InputNumber :max="25" :min="1" v-model:value="sfs.num" />
      </FormItem>

      <MinusCircleOutlined class="ml-50px" @click="removeFileSystem(sfs)" />
    </Space>
    <FormItem>
      <Button type="dashed" block @click="addFileSystem"> <PlusOutlined />添加文件系统 </Button>
    </FormItem>
  </Form>
</template>

<script lang="ts" setup>
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { Select, InputNumber, Button, FormItem, Form, Space } from 'ant-design-vue';
import { getSfsList } from '../../../api/system-mgmt/app-mgmt/app';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import eventBus from '/@/utils/eventBus';

const props = defineProps(['value', 'options', 'onChange']);
const emit = defineEmits(['change']);
interface sfsTurboDtoList {
  value: string;
  price: string;
  id: number;
}

const emitData = ref<any[]>([]);
const fsSpecifications = ref([]);

const [fileSystemList, setList] = useRuleFormItem(props, 'value', 'change', emitData);

const fetchSfsList = async () => {
  const res = await getSfsList();
  setList([{ shareProto: res[0], size: 500, num: 1 }]);
  emit('change', fileSystemList.value);
  fsSpecifications.value = res;
};
fetchSfsList();

const removeFileSystem = (item: sfsTurboDtoList) => {
  let index = fileSystemList.value.indexOf(item);
  if (index !== -1) {
    fileSystemList.value.splice(index, 1);
  }
  emit('change', fileSystemList.value);
};

const addFileSystem = () => {
  fileSystemList.value.push({
    shareProto: fsSpecifications.value[0],
    size: 500,
    num: 1,
  });
  emit('change', fileSystemList.value);
};

const resetForm = () => {
  fileSystemList.value = [];
  emit('change', fileSystemList.value);
};

eventBus.on('clearFsForm', resetForm);
</script>

<style lang="less" scoped></style>
